import React from 'react'
import PropTypes from 'prop-types'
import Paper from '@material-ui/core/Paper'
import Grid from '@material-ui/core/Grid'
import { withStyles } from '@material-ui/core/styles'
import YaKEditor from './AceInputArea'
import OutputArea from './OutputArea'
import MessageArea from './MessageArea'

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
})

// let codeOutput = ''

class CodeExecution extends React.Component {
  constructor() {
    super()
    this.state = {
      editorInput: 'print("Hello YaK!")',
      editorOutput: '',
      CodeExecutionMsg: '',
    }
    this.handleEditorChange = this.handleEditorChange.bind(this)
  }

  componentDidMount() {
    // do something here
  }

  handleEditorChange = (newValue) => {
    this.setState({ editorInput: newValue })
  }

  render() {
    const { classes } = this.props
    const {
      editorInput,
      editorOutput,
      CodeExecutionMsg,
    } = this.state
    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs>
            <Paper className={classes.paper}>
              <YaKEditor editorInput={editorInput} updateInput={this.handleEditorChange} />
            </Paper>
          </Grid>
          <Grid item xs>
            <Paper className={classes.paper}>
              <OutputArea editorOutput={editorOutput} />
              OutputArea
            </Paper>
          </Grid>
        </Grid>
        <Grid container spacing={24}>
          <Grid item xs>
            <Paper className={classes.paper}>
              <MessageArea CodeExecutionMsg={CodeExecutionMsg} />
              MessageArea
            </Paper>
          </Grid>
        </Grid>
      </div>
    )
  }
}

CodeExecution.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(CodeExecution)
